<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<div id="app">
  <p>请输入关键词: <input type="text" v-model="keyword"><button @click="selectStudents()">搜索</button> </p >
  <table border="1px" width="800px">
    <tr><th>编号</th><th>姓名</th><th>年龄</th><th>电话</th><th>地址</th><th>性别</th></tr>
    <tr v-for="stu in student">
      <td>{{stu.sid}}</td>
      <td>{{stu.sname}}</td>
      <td>{{stu.age}}</td>
      <td>{{stu.address}}</td>
      <td>{{stu.gender}}</td>
    </tr>
  </table>
</div>

<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      students: [],
      keyword: ""
    },
    methods:{
      // 加载学生
      loadStudents(){
        // 通过axios发送请求给后台，处理后台返回的响应数据 可以发送不同类型的请求
        // then用于处理响应的数据
        axios.get("http://localhost:8080/selectall")
                .then(result => {
                  console.log(result.data)
                  if (result.data.code == 200){
                    // 把后台的数据绑定到模型中
                    this.students = result.data.data;
                  }
                })
      },
      selectStudents(){
        axios.get(`http://localhost:3306/test3?keyword=${this.keyword}`)
                .then(result => {
                  console.log(result.data)
                  if (result.data.code = 200){
                    this.students = result.data.data;
                  }
                })
      }

    },
    mounted() {
      // 调用加载学生方法
      this.loadStudents();
    }
  })
</script>

</body>
</html>